<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" :title="title" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>
		<view class="login">
			<view class="flex justify-content_center">
				<up-avatar :src="note.avatar" size="128rpx" @click="uploadImg"></up-avatar>
			</view>
			<view class="name">昵称</view>
			<view class="input flex align-item_center justify-content_center">
				<up-input placeholder="请输入昵称" border="none" v-model="note.nickname"></up-input>
			</view>
			<view class="name">手机号</view>
			<view class="input flex align-item_center justify-content_center">
				<up-input placeholder="请输入手机号" type="number" border="none" v-model="note.mobile"></up-input>
			</view>
			<view class="name">密码</view>
			<view class="input flex align-item_center justify-content_center">
				<up-input placeholder="请输入密码" border="none" v-model="note.password"></up-input>
			</view>
			<view class="name">重复密码</view>
			<view class="input flex align-item_center justify-content_center">
				<up-input placeholder="请输入重复密码" border="none" v-model="note.secondPassword"></up-input>
			</view>
		</view>
		<view class="v-button" style="bottom: 110rpx;" @click="confirm">确认注册</view>
	</view>
</template>

<script setup>
	import upload from "@/utils/upload.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		msg,
		back
	} from "@/utils/tool.js"
	import authApi from "@/api/member/auth.js"

	function confirm() {
		if (!note.avatar) return msg("请上传头像")
		if (!note.nickname) return msg("请输入昵称")
		if (!note.mobile) return msg("请输入手机号")
		if (!note.password) return msg("请输入密码")
		if (!note.secondPassword) return msg("请输入重复密码")
		if (note.secondPassword !== note.password) return msg("两次密码不一致")
		if (note.mobile.length !== 11) return msg("请输入11位手机号码")
		authApi.register(note).then(res => {
			if (res.code === 0) {
				msg('注册成功');
				back()
			}
		})
	}

	const title = ref("注册")
	const note = reactive({
		avatar: "",
		nickname: "",
		mobile: null,
		password: null,
		secondPassword: null
	})

	function uploadImg() {
		uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				upload(chooseImageRes.tempFilePaths[0]).then((res) => {
					note.avatar = res.data
				})
			}
		});
	}
</script>
<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.login {
		padding: 20rpx 30rpx;

		.input {
			box-sizing: border-box;
			margin: 15rpx auto 0;
			width: 690rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			padding: 0rpx 30rpx;
		}

		.name {
			font-weight: 500;
			font-size: 36rpx;
			color: #fff;
			padding-top: 30rpx;
		}
	}
</style>